<template>
  <div class="index">
    <Header></Header>
    <div class="main" style="padding-top: 60px;">
      <p class="current-nav">
        当前位置 :
        <router-link to="homePage">首页</router-link>
        <i> > </i>习近平总书记关于应急管理的重要论述
      </p>
      <div class="monitor-main" style="height: 100%">
        <div class="monitor-content" style="height: 100%">
          <div class="asTitle">
          </div>
            <!-- <p>预案汇编综合得分：
                <strong>63.5</strong>分</p> -->
          <div class="table-wrap">
            <el-table
              ref="multipleTable"
              :data="planList"
              tooltip-effect="dark"
              v-loading.lock="loadings"
              element-loading-spinner="el-icon-loading"
              :show-header="showHeader"
            >

              <el-table-column
                label=""
                :show-overflow-tooltip="true"
                align="left"
              >
                <template slot-scope="scope">
                  <router-link :to="{path:'newsDetail',query:{id:scope.row.id,type:3}}" :title="scope.row.name"> {{scope.row.name}}</router-link>
                </template>
              </el-table-column>
              <el-table-column
                label=""
                :show-overflow-tooltip="true"
                align="right"
              >
                <template slot-scope="scope">
                  {{scope.row.publishTime | timeBy}}
                </template>
              </el-table-column>

            </el-table>
          </div>
          <div class="page-container">
            <el-pagination
              @current-change="getList"
              :current-page.sync="pageIndex"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
            <el-button>确定</el-button>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from '../common/header3'
  import Footer from '../common/footer'

  export default {
    name: 'monitor',
    components: {
      Header,
      Footer
    },
    data() {
      return {
        loadings: false,
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        planList: [],
        uploadFile1Loading: false,
        uploadFile2Loading: false,
        uploadFile3Loading: false,
        scoreArr: [],
        userAccount: '',
        flag: false,
        showHeader: false,
        tabList: [],
        tabList1: [['家庭安全','社区安全','公共场所安全','自救互救常识'],
          ['气象灾害','海洋灾害','洪涝灾害','地质灾害','地震灾害','森林灾害'],
          ['矿石','危险品','交通','工商贸','火灾']],
        position:0,
        title:'',
      };
    },
    created() {
      this.userAccount = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).userAccount : ''
      //this.getScore()
      this.getList();
      //this.getToptab()
    },
    methods: {
 /*     getToptab(){
        //let type=this.$route.params.type;

      },*/
      addClass(index) {
          this.position = index
      },

      getScore() {
        let url = `${this.$baseUrl}emergency/v1.0/plan/avg/score/${JSON.parse(localStorage.getItem("user")).id}`
        this.$axios.get(url).then(res => {
          if (res.data.meta.code == 200) {
            this.scoreArr = []
            if (res.data.data.length > 0) {
              this.scoreArr[0] = {}
              res.data.data.forEach(item => {
                this.scoreArr[0][item.planType] = item.score
              });
            }
          } else {
            this.scoreArr = []
            if (res.data.meta.message !== '暂无数据') {
              this.$message({
                message: res.data.meta.message,
                type: "error"
              });
            }
          }
        })
      },
      getList() {
        let params = {
          "pageIndex": this.pageIndex,
          "pageSize": this.pageSize,
          "type":'3'
        }
        let url = `${this.$baseUrl}emergency/v1.0/infomation/list`
        this.$axios.post(url, params).then(res => {
          if (res.data.meta.code == 200) {
            this.planList = res.data.data.records
            this.total = res.data.data.total
            this.flag = true
          } else {
            this.planList = []
            this.total = 0
            if (res.data.meta.message !== '暂无数据') {
              this.$message({
                message: res.data.meta.message,
                type: "error"
              });
            }
          }
        })
      },
      lookPlan(item) {
        let url = `${this.$baseUrl}emergency/v1.0/index/plan/score/info/${item.id}/${item.planType}`
        this.$axios.get(url).then(res => {
          if (res.data.meta.code == 200) {
            window.open(res.data.data)
          } else {
            this.$message({
              message: res.data.meta.message,
              type: "error"
            });
          }
        })
      },
      exportPlan(item) {
        let url = `${this.$baseUrl}emergency/v1.0/plan/score/download/${item.id}/${item.planType}`
        this.$axios.get(url).then(res => {
          if (res.data.meta.code == 200) {
            this.download(res.data.data)
          } else {
            this.$message({
              message: res.data.meta.message,
              type: "error"
            });
          }
        })
      },
      deletePlan(item) {
        let url = `${this.$baseUrl}emergency/v1.0/plan/score/delete/${item.id}`
        this.$axios.get(url).then(res => {
          if (res.data.meta.code == 200) {
            this.$message({
              message: '删除成功',
              type: "error"
            });
            this.getScore()
            this.getList()
            this.deleteFile(item.id)
          } else {
            this.$message({
              message: res.data.meta.message,
              type: "error"
            });
          }
        })
      },

      download(blobUrl, name) {
        const a = document.createElement('a');
        a.style.display = 'none';
        a.download = name;
        a.href = blobUrl;
        a.click();
      },
      splitFileName(text) {
        var pattern = /\.{1}[a-z]{1,}$/;
        if (pattern.exec(text) !== null) {
          return (text.slice(0, pattern.exec(text).index));
        } else {
          return text;
        }
      }
    },
    filters: {
      timeBy(val) {
        if (val) {
          return val.substring(0, 10)
        }
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .current-nav {
    float: none;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 30px;
    color: #939393;
    font-size: 14px;
    background: #f3f3f3;
  }

  .monitor-main {
    padding: 0 30px;
  }

  .monitor-content {
    background: #fff;
  }

  .asTitle {
    margin-bottom: 50px;
    height: 186px;
    width: 100%;
    background: url("../../../static/images/xiDaJH.png")no-repeat;
    background-size: 100% 100%;

  }

  .asTitle h3 {
    font-weight: bold;
    font-size: 18px;
    color: #666;
    padding: 30px 0 0 30px;
  }

  .hint-section {
    padding-left: 30px;
    margin-bottom: 52px;
    padding-top: 20px;
  }

  .hint-section dt {
    width: 102px;
    height: 36px;
    line-height: 36px;
    background: url(../../../static/images/hint.png) no-repeat 12px center;
    background-size: 18px 18px;
    background-color: #f6f9ff;
    padding-left: 36px;
    border-radius: 4px;
    font-size: 14px;
    color: #3e83fc;
    margin-bottom: 15px;
  }

  .hint-section dd {
    line-height: 30px;
    padding-left: 10px;
    color: #656565;
    font-size: 14px;
  }

  .table-header {
    padding: 0 30px;
  }

  .table-header .opts {
    float: left;
    margin-bottom: 30px;
  }

  .table-header .opts button {
    background: #f6f9ff;
    border: none;
    height: 36px;
    border-radius: 4px;
    font-size: 14px;
    color: #3e83fc;
    padding: 0 10px;
    margin-right: 10px;
  }

  .table-header button i {
    margin-right: 4px;
  }

  .table-header p {
    float: right;
    line-height: 36px;
    color: #686868;
    font-size: 12px;
  }

  .table-header p strong {
    color: #4482fb;
    font-size: 18px;
  }

  .table-wrap {
    padding: 0 10%;
  }

  .table-wrap .el-table {
    width: 100%;
    border-top: 1px solid #ebeef5;
  }

  .page-container {
    padding: 28px 0;
    width: 620px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .page-container .el-pagination {
    float: right;
  }

  .page-container .el-button {
    float: right;
    background: #edf4fe;
    width: 50px;
    padding: 0;
    height: 28px !important;
    margin: 4px 10px auto;
    color: #7fa4fc;
    border: 0;
  }

  .table-wrap table button {
    width: 80px;
    height: 36px;
    background-color: #f6f9ff;
    border: none;
    font-size: 14px;
    color: #3e83fc;
    text-align: center;
  }

  .red {
    color: #ff0507;
  }

  .mb50 {
    margin-bottom: 40px;
  }

  .table-title {
    font-weight: bold;
    font-size: 16px;
    color: #666;
    line-height: 50px;
    margin-left: 20px;
  }
  .tabDiv {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #eee;
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
    p {
      display: inline-block;
      width: 130px;
      margin-right: 40px;
      text-align: center;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
    }
    .active {
      border-bottom: 2px solid #1e5af9;
      color: #1e5af9;

    }
  }
</style>
<style>

  .table-header .opts > div {
    float: left;
  }

  .table-wrap th .cell {
    color: #333333;
  }

  .table-wrap td .cell {
    color: #676767;
  }
  .el-table.el-table--fit.el-table--enable-row-hover.el-table--enable-row-transition{
    border-top: 0;
  }
</style>


